<template>
  <div id="app">
    <!-- 通过 v-model 进行双向绑定，它只是语法糖。等价于 value 和 input 事件 -->
    <input v-model="message">
    <!-- 等价于 v-model -->
    <input :value="message" @input="handleChange">
    {{message}}
    <!-- 自定义组件 可以通过 model 属性，自定义 v-model -->
    <!-- v-model 只能绑定一个属性，可通过 .syn 绑定多个属性 -->
    <todo-list>

      <!-- 虚拟 dom 只在同层级进行比对 -->
      <!-- :key 组件在虚拟 dom 中的唯一标识 -->
      <todo-item @delete="handleDelete" v-for="item in list" :key="item.title" :title="item.title" :del="item.del">
        <!-- 作用域插槽，将子组件的值传递给父组件使用。相当于返回组件的函数 -->
        <template v-slot:pre-icon="{value}">
          <span>前置图标 {{value}}</span>
        </template>
        <!-- 可设置插槽默认值
        <span slot="suf-icon">后置图标</span>
        -->
      </todo-item>
    </todo-list>
  </div>
</template>

<script>
import TodoList from './components/TodoList.vue'
import TodoItem from './components/TodoItem.vue'

export default {
  name: 'App',
  components: {
    TodoList,
    TodoItem
  },
  data() {
    return {
      message: "hello vue",
      list: [
        {
          title:'课程1',
          del: true
        },
        {
          title:'课程2',
          del: false
        }
      ]
    }
  },
  methods: {
    handleDelete(val) {
      console.log("handleDelete", val)
    },
    handleChange(e) {
      this.message = e.target.value
    }
  }
}
</script>
